<template>
  <div class="z">
    <div class="container" id="form" v-show="$store.state.show">
      <div class="card">
        <i class="close" @click="close()">X</i>
        <a class="singup">记录 密文</a>
        <div class="inputBox1">
          <input type="text" required="required" v-model="keyid" />
          <span class="user">密文</span>
        </div>

        <div class="inputBox">
          <input type="text" required="required" v-model="words" />
          <span>留言内容</span>
        </div>

        <div class="inputBox">
          <input type="text" required="required" v-model="userp" />
          <span>留言者</span>
        </div>

        <button class="enter" @click="createwords()">创建</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OnewordForm',

  data() {
    return {
      keyid: '',
      words: '',
      userp: '',
      data: { words: '', keyid: '', userp: '' }
    }
  },

  mounted() {},

  methods: {
    close() {
      this.$store.state.show = false
    },
    createwords() {
      this.data.keyid = this.keyid
      this.data.userp = this.userp
      this.data.words = this.words
      const data = JSON.stringify(this.data)
      //console.log(data)
      this.postMessage(data)
    },
    postMessage(data) {
      // 发送POST请求
      this.$axios
        .get('http://hn216.api.yesapi.cn/api/App/Table/CheckCreate', {
          params: {
            // 这里是请求体的数据
            //表名
            model_name: 'oneword',
            app_key: '089418167DCDAE1B02319B404DD5B4B0',
            sign: 'A4860B29A9C1C18D2F3AF1E2A45C2B7A',
            data,
            //防止重复字段，可有逗号隔开
            check_field: 'keyid',
            yesapi_allow_origin: 1
          }
        })
        .then((response) => {
          // 处理请求成功的结果
          console.log(response.data)
          const err = response.data.data.err_msg
          if (err == '') {
            alert('创建成功！！')
            this.$store.state.show = false
          } else {
            alert(err)
          }
        })
        .catch((error) => {
          // 处理请求失败的错误
          alert('创建失败，请前往控制台查看报错！！')
          console.error(error)
        })
    }
  }
}
</script>

<style scoped>
.close {
  position: absolute;
  margin-top: -118%;
  margin-left: 92%;
  cursor: default;
}
.z {
  position: absolute;
  width: 98vw;
  height: 70vh;
  /* 居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6rem;
}
.container {
  position: absolute;
  z-index: 1;
  width: 20rem;
  /* margin-left: 36rem;
  margin-top: 8rem; */
}
.singup {
  color: #000;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  font-weight: bold;
  font-size: x-large;
  margin-top: 1.5em;
}

.card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 35%;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 35px;
  border-radius: 15px;
  background: #e3e3e3;
  -webkit-box-shadow: 16px 16px 32px #c8c8c8, -16px -16px 32px #fefefe;
  box-shadow: 16px 16px 32px #c8c8c8, -16px -16px 32px #fefefe;
  border-radius: 8px;
  opacity: 1 !important;
  width: 100%;
}

.inputBox,
.inputBox1 {
  position: relative;
  width: 250px;
}

.inputBox input,
.inputBox1 input {
  width: 100%;
  padding: 10px;
  outline: none;
  border: none;
  color: #000;
  font-size: 1em;
  background: transparent;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  border-bottom-left-radius: 8px;
}

.inputBox span,
.inputBox1 span {
  margin-top: 5px;
  position: absolute;
  left: 0;
  -webkit-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  transform: translateY(-4px);
  margin-left: 10px;
  padding: 10px;
  pointer-events: none;
  font-size: 12px;
  color: #000;
  text-transform: uppercase;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  letter-spacing: 3px;
  border-radius: 8px;
}

.inputBox input:valid ~ span,
.inputBox input:focus ~ span {
  -webkit-transform: translateX(113px) translateY(-15px);
  -ms-transform: translateX(113px) translateY(-15px);
  transform: translateX(113px) translateY(-15px);
  font-size: 0.8em;
  padding: 5px 10px;
  background: #000;
  letter-spacing: 0.2em;
  color: #fff;
  border: 2px;
}

.inputBox1 input:valid ~ span,
.inputBox1 input:focus ~ span {
  -webkit-transform: translateX(156px) translateY(-15px);
  -ms-transform: translateX(156px) translateY(-15px);
  transform: translateX(156px) translateY(-15px);
  font-size: 0.8em;
  padding: 5px 10px;
  background: #000;
  letter-spacing: 0.2em;
  color: #fff;
  border: 2px;
}

.inputBox input:valid,
.inputBox input:focus,
.inputBox1 input:valid,
.inputBox1 input:focus {
  border: 2px solid #000;
  border-radius: 8px;
}

.enter {
  height: 45px;
  width: 100px;
  border-radius: 5px;
  border: 2px solid #000;
  cursor: pointer;
  background-color: transparent;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 3em;
}

.enter:hover {
  background-color: rgb(0, 0, 0);
  color: white;
}
</style>